
Vue.component('c-upload-image', {
  template:`

<div>
  <el-upload
    :action="action"
    :limit="limit"
    list-type="picture-card"
    :file-list="list"
    :on-success="handleSuccess"
    :on-preview="handleCardPreview"
    :on-error="handleError"
    :on-exceed="handleExceed"
    :before-upload="beforeAvatarUpload"
    :on-remove="handleRemove">
    <i class="el-icon-plus" ></i>
    <div slot="tip" class="el-upload__tip">{{tips}}</div>
  </el-upload>

  <el-dialog :visible.sync="Preview.Visible">
    <img width="100%" :src="Preview.ImageUrl" alt="">
  </el-dialog>
</div>
  `,
  data() {
    return {
      Preview:{
        ImageUrl:"",
        Visible:false
      }
    }
  },
  props: {
    action: {
      default: ""
    },
    limit: {
      default: 1
    },
    value: {
      default: "[]"
    },
    maxsize: {
      default: 2
    },
    tip: {
      default: "只能上传jpg/png/gif文件，且不超过{maxsize}M"
    }
  },

  methods: {
    init(){

    },
    sync(){
      this.$emit('input', JSON.stringify(this.value));
    },
    parseFileUrl(fileList){
      var list=[];
      for (var i = 0; i < fileList.length; i++) {
        var res=false;
        if (fileList[i].response){
          var img=fileList[i].response;
          if (img.result){
            res={
              uid:fileList[i].uid || "",
              name:img.data.name,
              path:img.data.path,
              url:img.data.url
            };
          }
        }else if ((fileList[i].uid)&&(fileList[i].name)&&(fileList[i].url)){
          res={
            uid:fileList[i].uid,
            name:fileList[i].name,
            path:fileList[i].path,
            url:fileList[i].url
          };

        }

        if (res){
          list.push(res);
        }
      }

      return list;
    },
    handleSuccess(response, file, fileList) {
      if (response.result){
        this.value=this.parseFileUrl(fileList);
        this.sync();
      }else{
        APP.alert(response.data);
      }
    },
    handleRemove(file, fileList) {
      this.value=this.parseFileUrl(fileList);
      this.sync();
    },
    handleError(err, file, fileList){
      APP.alert("遇到错误");
    },
    handleExceed(files, fileList){
      APP.alert("最多只能上传 "+this.limit+" 个文件");
    },
    beforeAvatarUpload(file){
      const isType = file.type.indexOf("image") != -1;
      const isSize = file.size / 1024 / 1024 < this.maxsize;
      if (!isSize) {
        APP.alert("文件不能超过 "+this.maxsize+" M");
      }
      if (!isType) {
        APP.alert("文件类型错误");
      }
      return isSize && isType;
    },
    handleCardPreview(file) {
      this.Preview.ImageUrl = file.url;
      this.Preview.Visible = true;
    }
  },
  computed:{
    list:function(){
      var result=[];
      if (this.value){
        if (typeof(this.value)=="string"){
          if (this.value.length>1){
            result=JSON.parse(this.value);
          }
        }else{
          if (this.value.length>0){
            result=this.value;
          }
        }
      }
      return result;
    },
    tips:function(){
      var msg=this.tip.replace("{maxsize}",this.maxsize);
      return msg;
    }
  },

  mounted(){
    var that=this;
    this.$nextTick(function () {
      that.init();
    });
  }
});




Vue.component('c-upload-video', {
  template:`

<div>
  <el-upload
    drag
    :action="action"
    :limit="limit"
    list-type="text"
    :file-list="list"
    :on-success="handleSuccess"
    :on-preview="handleCardPreview"
    :on-error="handleError"
    :on-exceed="handleExceed"
    :before-upload="beforeAvatarUpload"
    :on-remove="handleRemove">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">{{tips}}</div>
  </el-upload>

  <el-dialog :visible.sync="Preview.Visible">
    <video :src="Preview.ImageUrl" controls="controls" style="width:100%">
    您的浏览器不支持 video 标签。
    </video>
  </el-dialog>
</div>
  `,
  data() {
    return {
      Preview:{
        ImageUrl:"",
        Visible:false
      }
    }
  },
  props: {
    action: {
      default: ""
    },
    limit: {
      default: 1
    },
    value: {
      default: "[]"
    },
    maxsize: {
      default: 200
    },
    tip: {
      default: "只能上传mp4文件，且不超过{maxsize}M"
    }
  },

  methods: {
    init(){

    },
    sync(){
      this.$emit('input', JSON.stringify(this.value));
    },
    parseFileUrl(fileList){
      var list=[];
      for (var i = 0; i < fileList.length; i++) {
        var res=false;
        if (fileList[i].response){
          var img=fileList[i].response;
          if (img.result){
            res={
              uid:fileList[i].uid || "",
              name:img.data.name,
              path:img.data.path,
              url:img.data.url
            };
          }
        }else if ((fileList[i].uid)&&(fileList[i].name)&&(fileList[i].url)){
          res={
            uid:fileList[i].uid,
            name:fileList[i].name,
            path:fileList[i].path,
            url:fileList[i].url
          };

        }

        if (res){
          list.push(res);
        }
      }

      return list;
    },
    handleSuccess(response, file, fileList) {
      if (!response.result){
        APP.alert(response.data);
      }
      this.value=this.parseFileUrl(fileList);
      this.sync();

    },
    handleRemove(file, fileList) {
      this.value=this.parseFileUrl(fileList);
      this.sync();
    },
    handleError(err, file, fileList){
      APP.alert("遇到错误");
    },
    handleExceed(files, fileList){
      APP.alert("最多只能上传 "+this.limit+" 个文件");
    },
    beforeAvatarUpload(file){
      const isType = file.type.indexOf("video") != -1;
      const isSize = file.size / 1024 / 1024 < this.maxsize;
      if (!isSize) {
        APP.alert("文件不能超过 "+this.maxsize+" M");
      }
      if (!isType) {
        APP.alert("文件类型错误");
      }
      return isSize && isType;
    },
    handleCardPreview(file) {
      this.Preview.ImageUrl = file.url;
      this.Preview.Visible = true;
    }
  },
  computed:{
    list:function(){
      var result=[];
      if (typeof(this.value)=="string"){
        if (this.value.length>1){
          result=JSON.parse(this.value);
        }
      }else{
        if (this.value.length>0){
          result=this.value;
        }
      }

      return result;
    },
    tips:function(){
      var msg=this.tip.replace("{maxsize}",this.maxsize);
      return msg;
    }
  },

  mounted(){
    var that=this;
    this.$nextTick(function () {
      that.init();
    });

  }
});
